<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天界面</title>
    <script src="./js/jQuery.min.js"></script>

    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/client.css" id="css_load">
</head>

<body>
    <div class="mask"></div>
    <div class="container">
        <div class="main-box">
            <div class="left-container">
                <div class="userinfo">
                    <img src="" alt="u-img" />
                    <p id="username">小白的白白</p>
                </div>
                <div class="search">
                    <input type="text" placeholder="请输入用户名">
                    <button onclick="sendSearchReq()"></button>
                </div>
                <div class="label">
                    <div class="session" onclick="changeSession()" id="session_id"></div>
                    <div class="friend" onclick="changeFriend()" id="friend_id"></div>
                    <div class="friend-apply" onclick="changeApply(true)" id="friend_apply"></div>
                    <div id="apply-num"></div>
                </div>
                <ul class="list" id="session-list">
                    <!-- <li>
                        <div class="session-photo"><img src="" alt="u-img"></div>
                        <div>
                            <h3>用户名</h3>
                            <p>消息内容</p>
                        </div>
                        <p class="did_num"></p>
                        <p class="send_time"></p>
                    </li> -->
                </ul>
                <ul class="list hide" id="friend-list">
                    <!-- <li to_u_id=${friend.fId}>
                        <div class="s-img"><img src="" alt=""></div>
                        <h3 username='${friend.friendName}'>用户名</h3>
                    </li> -->
                </ul>

                <ul class="list hide" id="apply-list">
                    <!-- 这是好友申请列表 -->
                    <!-- <li>
                        <div class="user-search">
                            <div class="a-img"><img src="" alt="a-img"></div>
                            <p user-id="12">用户名</p>
                            <button onclick="playApply(this)">申请</button>
                        </div>
                    </li> -->

                    <!-- 接下来这个是验证信息列表 -->
                    <p class="explain">以下用户请求添加为您的好友</p>
                    <li class="apply-li">
                        <div class="user-search">
                            <div class="apply-img"><img src="" alt="apply-img"></div>
                            <p>xiaobai</p>
                            <input type="text" id="reason" value="可以交个朋友吗？" disabled>
                            <button>拒绝</button>
                            <button>同意</button>
                        </div>
                    </li>

                </ul>
                <div class="apply-container hide">
                    <div class="apply-detail">
                        <textarea placeholder="请输入申请理由" id="apply-reason"></textarea>
                        <button onclick="sendAddReq()">发送</button>
                        <p id="close" onclick="closeApplyContainer()">×</p>
                    </div>
                </div>
            </div>
            <div class="right-container" id="toUserDetail">
                <div class="friend-name" id="userNick">
                    这是用户的昵称
                </div>
                <div class="message-container" id="mess_detail">
                    <!-- <div class="message-box message-it file-type">
                        <div class="detail-img"><img src="" alt="u-img"></div>
                        <div class="message-detail">
                            <h3>用户名</h3>
                            <p>
                                <img src="./img/upload_file.png" alt=""><span>文件名称</span>
                            </p>
                        </div>
                    </div> -->

                </div>
                <div class="fun-list">
                    <div class="upload-file">
                        <input type="file" id="selected-file" style="display: none;">
                        <img src="./img/upload_file.png" alt="上传文件">
                    </div>
                </div>
                <div class="enter">
                    <textarea id="input-enter" placeholder="输入内容..."></textarea>
                </div>
                <div class="send">
                    <button>发送</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/client.js"></script>
</body>

</html>